const boxDom:Element | null = document.querySelector(".box")

interface Itemtype {
    title:string,
    children?:any[],
}

//枚举
enum Color{
    "#ccc" = 1,
    "red",
    "greenyellow"
}

let num = 0;

//递归
const menuArr = (arr: Itemtype[], num:number):string =>{
    num += 1
    const newArr =arr.map(item => {
        return `<div style="background:${Color[num]}">
                <p>${item.title}</p>
                ${!item.children ? '' :`<div class='menuItem'>
                    ${menuArr(item.children,num)}
                </div>`}
            </div>`
    }).join('')

    return newArr
}

//点击事件

const bindEvent = () => {
    const pDom:Element[] | null = Array.from(document.querySelectorAll("p"))

    pDom.forEach(item=>{
        item.addEventListener('click',(e:any)=>{
            if(item.nextElementSibling){
                let isShow: string = e.target.nextElementSibling.style.display
                
                
                if(isShow === 'block'){
                    e.target.nextElementSibling.style.display = 'none'
                } else{
                    e.target.nextElementSibling.style.display = 'block'
                }
            }
        })
    })
    

}



const render = () => {
    (boxDom as Element).innerHTML = menuArr(menu,num)
    bindEvent()
}

render()